<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宾馆管理系统</title>
    <!-- 引用bootstrap.css -->
    <link rel="stylesheet" href="../static/static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="../static/static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
            background-image: url("../static/static/img/demo-1-bg.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .box {
            position: relative;
            width: 460px;
            height: 380px;
            background-color: #ffffffaa;
            margin: 180px auto;
            border-radius: 5px;
            z-index: 999;
        }

        .logo {
            width: 100%;
            height: 80px;
            padding:10px 5px 5px;
        }

        .logo img {
            height: 100%;
        }

        .form {
            width: 100%;
            height: calc(440px - 80px);
            /*运算符前后要有空格*/
            padding: 20px 56px 10px 10px;
            margin-left: 23px;
        }

        i {
            font-size: 16px;
            color: #333;
        }

        .login-btn {
            width: 100%;
            padding: 10px 0;
        }
        .footer{
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            color: white;
        }
        .vcode-box{
            position: relative;
        }
        .vcode-box img{
            width: 80px;
            height: 30px;
            position: absolute;
            top: 2px;
            right: 2px;
            bottom: 2px;
            border: 1px solid #eee;
            z-index: 999;
            cursor: pointer;
        }
        #demo-canvas{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*z-index: -1;*/
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="../static/static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="../static/static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="../static/static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>

            function login(){
                // 获取输入
                let username = $("#username").val();
                let password = $("#password").val();

                // 非空校验
                if(username == null || username === "" || password == null || password === ""){
                    bootoast({
                        message: '用户名或密码不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    })

                }else{
                    let param = {
                        "username" : username,
                        "password" : password
                    };
                    $.post("/login",param,function(data) {
                        if(data){
                            location.href="/home";
                        }else{
                            bootoast({
                                message: '用户名或密码错误！',
                                type: 'danger',
                                position:'top',
                                timeout:2
                            })
                        }
                    })
                }

            }


    </script>
</head>

<body>
<div class="container-fluid my-container" id="large-header">

    <div class="box">
        <!-- logo -->
        <div class="logo">
            <img src="../static/static/img/logo_login.png" alt="">
        </div>
        <div class="form">
            <form class="form-horizontal" id="myForm" >
                <div class="form-group">

                    <div class="input-group input-group-md">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入账户"/>
                    </div>
                </div>
                <div class="form-group">

                    <div class="input-group input-group-md">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                    </div>
                </div>
<!--                <div class="form-group">-->
<!--                    <div class="input-group input-group-md vcode-box">-->
<!--                        <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>-->
<!--                        <input type="text" class="form-control" id="vcode" name="vcode" placeholder="请输入验证码">-->
<!--                        <img alt="加载失败" id="vcode-img">-->
<!--                    </div>-->
<!--                </div>-->
                <div class="form-group">
                    <div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 记住密码
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div>
                        <button type="button" class="btn btn-primary login-btn" id="login-btn" onclick="login()">登录</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div class="footer">技术支持：西安粤嵌科技信息有限公司</div>
    <canvas id="demo-canvas"></canvas>
</div>

</body>
<script src="../static/static/js/TweenLite.min.js"></script>
<script src="../static/static/js/EasePack.min.js"></script>
<script src="../static/static/js/rAF.js"></script>
<script src="../static/static/js/demo-1.js"></script>
</html>